
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/konva@8.2.1/konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
<div id="container"></div>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;

  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
  });

  var layer = new Konva.Layer();
  stage.add(layer);

  // main API:
  var imageObj = new Image();
  imageObj.onload = function () {
    var yoda = new Konva.Image({
      x: 50,
      y: 50,
      image: imageObj,
      width: 106,
      height: 118,
    });

    // add the shape to the layer
    layer.add(yoda);
  };
  imageObj.src = 'https://konvajs.org/assets/yoda.jpg';

  // alternative API:
  Konva.Image.fromURL('https://konvajs.org//assets/darth-vader.jpg', function (darthNode) {
    darthNode.setAttrs({
      x: 200,
      y: 50,
      scaleX: 0.5,
      scaleY: 0.5,
    });
    layer.add(darthNode);
  });
  // save stage as a json string
  const img2json = stage.toJSON();
  const layerJson = layer.toJSON();
  console.log(img2json,layerJson);
</script>
</body>
</html>
